<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/30
  Time: 21:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@ page language="java" pageEncoding="gb2312"%>--%>
<%--<%@ page contentType="text/html;charset= gb2312"%>--%>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>商品分类页面</title>
    <script SRC="${pageContext.request.contextPath}/js/getParam.js"></script>
    <style>
        body{
            font-family: 宋体;
        }
        .content{
            width: 1000px;
            height: 750px;
            /* background-color: #008000; */
            margin: auto;
        }
        .content-left{
            width: 200px;
            height: 293px;
            background-color: #f8f8f8;
            float: left;
        }
        .content-right{
            width: 800px;
            height: 100%;
            /* background-color: #ADFF2F; */
            float: left;
        }
        .content-left>div{
            /* 将div的共性抽出 */
            width: 198px;
            border: 1px solid #e9e9e9;
        }
        .content-left-title{
            height: 35px;
            line-height: 35px;
            padding-left: 10px;
            font-size: 15px;
            box-sizing: border-box;
            color: #B45A01;
            font-weight: bold;
        }
        .content-left-list{
            height: 30px;
            line-height: 30PX;
            font-size: 12PX;
            overflow: hidden;
            text-overflow:ellipsis;
        }
        .content-left-list-num{
            width: 15px;
            height: 15px;
            background-color: #FE7D00;
            color: white;
            font-size: 12PX;
            line-height: 15PX;
            text-align: center;
            border-radius: 3PX;
            float: left;
            margin:7PX ;
        }
        .content-right-top{
            width: 100%;
            height: 700px;
            /* background-color: #0000FF; */
        }
        .content-right-bottom{
            width: 100%;
            height: 50px;
            /* background-color: goldenrod; */
        }
        .content-right-top-goods{
            width: 246px;
            height: 330px;
            /* background-color: #7FFF00; */
            float: left;
            margin: 10px;
        }
        .goods-img{
            width: 200px;
            height: 200px;
            border: 1px solid #848484;
            margin: auto;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 6;
            overflow: hidden;
        }
        .goods-img>img{
            width: 100%;
            height: 100%;
        }
        .goods-name,.goods-price,.goods-sales,.addCart{
            margin-left: 20px;
        }
        .goods-name{
            width: 200px;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            overflow: hidden;
            text-overflow:ellipsis;
            box-sizing: border-box;
        }
        .goods-price{
            width: 200px;
            height: 30px;
        }
        .goods-price-sale{
            color: #cc3300;
            font-size: 15px;
            font-weight: bold;
            line-height: 30px;
            padding: 5px;
            box-sizing: border-box;
        }
        .goods-price-mark{
            color: #848484;
            text-decoration: line-through;
            font-size: 12px;
        }
        .goods-sales{
            width: 100%;
            height: 30px;
            font-size: 12px;
        }
        .addCart{
            width: 120px;
            height: 25px;
            /* background-color: #E9E9E9; */
            color: #333333;
            border: 1px solid darkgray;
            border-radius: 5px;
        }
        .addCart-logo{
            width: 25px;
            height: 100%;
            line-height: 28px;
            text-align: center;
            float: left;
        }
        .addCart-text{
            width: 73px;
            height: 100%;
            float: left;
            font-size: 13px;
            line-height: 25px;
        }
        /* 子元素选择变为后代选择 */
        .content-right-bottom div{
            float: left;
        }
        .first,.last{
            width: 50px;
            height: 20px;
            border: 1px solid #d5d5d5;
            color: #1a66b3;
            font-size: 12px;
            font-weight: bold;
            line-height: 20px;
            text-align: center;
            border-radius: 3px;
            margin-left: 10px;
        }
        .num{
            width: 20px;
            height: 20px;
            background-color: #cc3300;
            color: white;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
            border-radius: 3px;
            margin-left: 10px;
        }
        .page-text{
            width: 150px;
            height: 30px;
            /* background-color: #0000ff; */
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            color: #848484;
        }
        .page-num{
            /* float: left; */
            width: 20px;
            height: 20px;
            border: 1px solid #848484;
            border-radius: 3px;
        }
        .page-text>div{
            margin-left: 5px;
        }
        body{
            font-family: 宋体;
            margin: 0;
        }
    </style>
</head>
<body>
<%--商城页抬头--%>
<%@include file="headtop.jsp"%>
<%--商城头分类--%>
<%@include file="headmid.jsp"%>
<%--搜索框引入--%>
<%@ include file="search.jsp"%>


<div class="content">
    <div class="content-left">
        <div class="content-left-title">
            销售排行榜
        </div>
        <c:forEach items="${ranklist}" var="goods" begin="0" end="9" varStatus="s">
        <div class="content-left-list">
            <div class="content-left-list-num">${s.index+1}</div><a href="${pageContext.request.contextPath}/goods/details?id=${goods.id}"  title="  ${goods.name}" alt="${goods.name}">${goods.name}</a>
        </div>
        </c:forEach>
    </div>

    <div class="content-right">
        <div class="content-right-top">
            <%--分类书籍展示循环--%>
            <c:forEach items="${plist.list }" var="goods">
                <div class="content-right-top-goods">
                    <div class="goods-img">
                        <a title="${goods.name}"  href="${pageContext.request.contextPath}/goods/details?id=${goods.id}">
                        <img src="${pageContext.request.contextPath}/img/${goods.image}" title="${goods.name}"/>
                        </a>
                    </div>
                    <div class="goods-name" >
                        <a href="${pageContext.request.contextPath}/goods/details?id=${goods.id}"  title="  ${goods.name}" alt="${goods.name}">
                          ${goods.name}
                        </a>
                     </div>
                    <div class="goods-price" >
                        <span class="goods-price-sale">¥
                                ${ goods.salesprice}
                        </span>
                        <span class="goods-price-mark">¥
                                ${ goods.marketprice}
                        </span>
                    </div>
                    <div class="goods-sales" >
                        总销量: ${goods.salenums}
                    </div>
                    <div class="addCart" >
                        <div class="addCart-logo">
                            <img src="${pageContext.request.contextPath}/img/cart.gif" />
                        </div>
                        <div class="addCart-text" >
                            <a href="javascript:void(0)" onclick="joinCart(join${goods.id})">加入购物车</a><input id="join${goods.id}" value="${goods.id}" style="display: none">
                        </div>
                    </div>
                </div>
            </c:forEach>


        <div class="content-right-bottom">
            <div class="first" >
                <a onclick="firstPage()" href="javascript:void(0)">首页</a>
            </div>
            <c:forEach begin="1" end="${plist.pages}" var="nums">
                <div class="num">
                    <a onclick="showGoodsPage(${nums})" href="javascript:void(0)" > ${nums}</a>
                </div>
            </c:forEach>
            <div class="last">
                <a onclick="lastPage()" href="javascript:void(0)" >尾页</a>
            </div>
            <div class="page-text">
                <div>当前第</div><div class="page-num">${plist.pageNum}</div>
                <div>页/共</div>
                <div class="page-num" id="totalPage">${plist.pages}</div>
                <div>页</div>
            </div>
        </div>
    </div>
</div>

<!-- 底栏属性 -->
<%@include file="helpinfo.jsp"%>
<!-- 尾栏 -->
<%@include file="footer.jsp"%>

</body>


<script>
    <%--    更多热门图书跳转--%>
    let keyword =   getParam.keyword;//getParam获取uri路径中参数的工具对象
    function firstPage() {//首页跳转
        location.href= "${pageContext.request.contextPath}/goods/search?keyword="+keyword+"&currentPage=1";
    }
    function lastPage() {//尾页跳转
        location.href= "${pageContext.request.contextPath}/goods/search?keyword="+keyword+"&currentPage="+$("#totalPage").text();
    }
    function showGoodsPage(num) {//中间分页跳转
        location.href= "${pageContext.request.contextPath}/goods/search?keyword="+keyword+"&currentPage="+num;
    }

    function joinCart(obj) {
        //获取gid     隐藏框获取
        let gid = $(obj).val();
        //获取nums
        let nums = 1;
        alert("已加入购物车！");
        // alert(gid+".."+nums);
        $.post("${pageContext.request.contextPath}/cart/joinCart", "gid=" + gid + "&nums=" + nums, function (data) {
        })
    }
</script>
</html>